/**
 * TaskProgressBar Component
 * 任务进度条组件 - 显示详细的表采集进度
 */

import React from 'react'
import { Progress, Card, Statistic, Row, Col } from 'antd'
import { CheckCircleOutlined, CloseCircleOutlined, SyncOutlined } from '@ant-design/icons'
import type { CollectionTask } from '@/services/models/types'
import { TaskStatus } from '@/services/models/types'

interface TaskProgressBarProps {
  task: CollectionTask
}

export const TaskProgressBar: React.FC<TaskProgressBarProps> = ({ task }) => {
  const failedCount = task.failedTables?.length || 0
  const progress = task.totalTables > 0
    ? Math.round(((task.completedTables + failedCount) / task.totalTables) * 100)
    : 0

  const getStatus = (): 'success' | 'exception' | 'active' | 'normal' => {
    if (task.status === TaskStatus.SUCCESS) return 'success'
    if (task.status === TaskStatus.FAILED) return 'exception'
    if (task.status === TaskStatus.RUNNING) return 'active'
    return 'normal'
  }

  return (
    <Card>
      <div className="mb-4">
        <Progress
          percent={progress}
          status={getStatus()}
          strokeWidth={12}
          format={(percent) => `${percent}% (${task.completedTables + failedCount}/${task.totalTables})`}
        />
      </div>

      <Row gutter={16}>
        <Col span={8}>
          <Statistic
            title="总表数"
            value={task.totalTables}
            prefix={<SyncOutlined />}
          />
        </Col>
        <Col span={8}>
          <Statistic
            title="成功"
            value={task.completedTables}
            valueStyle={{ color: '#3f8600' }}
            prefix={<CheckCircleOutlined />}
          />
        </Col>
        <Col span={8}>
          <Statistic
            title="失败"
            value={failedCount}
            valueStyle={{ color: failedCount > 0 ? '#cf1322' : undefined }}
            prefix={<CloseCircleOutlined />}
          />
        </Col>
      </Row>
    </Card>
  )
}

export default TaskProgressBar
